<!-- @format -->

<template>
	<ma-chart :option="loginChartOptions" />
</template>

<script setup lang="ts">
	import { nextTick, onMounted, ref, inject, watchEffect } from "vue";
	import { graphic } from "echarts";
	import { getGoodTypeTj } from "@/api/home/index.js";

	const rangeValue = inject("rangeValue");

	function graphicFactory(side) {
		return {
			type: "text",
			bottom: "8",
			...side,
			style: {
				text: "",
				textAlign: "center",
				fill: "#4E5969",
				fontSize: 12,
			},
		};
	}

	const graphicElements = ref([
		graphicFactory({ left: "2.6%" }),
		graphicFactory({ right: 0 }),
	]);

	const loginChartOptions = ref();

	const getData = () => {
		let obj = {}
		let startTime = rangeValue.value[0] + " 00:00";
		let endTime = rangeValue.value[1] + " 23:59";
		if(startTime == '2025-01-01 00:00'){
			obj.time = startTime + "," + endTime
			obj.type = 2
		}else{
			obj.time = startTime + "," + endTime
		}
		getGoodTypeTj(obj).then((res) => {
			console.log(res)
			let data = []
			let count = 0;
			res.data.forEach((item) => {
				count += item.jishu;
				if(item.jishu > 0){
					data.push(item)
				}
			});
			loginChartOptions.value = {
				title: {
					text: "卸车",
					x: "25%",
					y: "45%",
					textStyle: {
						fontSize: 16,
						color: "#415B73",
						fontWeight: 400,
					},
					itemGap: 5,
					padding: 0,
					textAlign: "center",
					subtext: `{name|${count}}{unit|车}`,
					subtextStyle: {
						color: "#666",
						fontSize: 16,
						textAlign: "cetner",
						rich: {
							name: {
								fontSize: 32,
								color: "#00A0E9",
							},
							unit: {
								fontSize: 16,
								color: "#415B73",
							},
						},
					},
				},
				legend: {
					type: "scroll",
					top: "center",
					right: "5%",
					selectedMode: false,
					orient: "vertical",
					containLabel: true,
					textStyle: {
						color: "#000",
						fontSize: 14,
						rich: {
							name: {
								padding: [0, 0, 0, 0], //上，右，下，左
								width: 100,
							},
							num: {
								padding: [0, 10, 0, 0],
								width: 50,
							},
							ratio: {
								padding: [0, 0, 0, 0],
							},
						},
					},
					formatter(name) {
						let num;
						let scale;
						let jishu;
						let count = 0;
						// for (let i = 0; i < res.data.length; i++) {
						// 	if (res.data[i].name == name) {
						// 		num = Math.round(parseFloat(res.data[i].shuliang) * 1000) / 1000;
						// 		scale =
						// 			Math.round(parseFloat(res.data[i].dunshu) * 1000) / 1000;
						// 	}
						// }
						for (let i = 0; i < data.length; i++) {
							if (data[i].name == name) {
								num = Math.round(parseFloat(data[i].shuliang) * 1000) / 1000;
								scale =
									Math.round(parseFloat(data[i].dunshu) * 1000) / 1000;
								jishu = data[i].jishu
							}
						}
						let v = num;
						let s = scale;

						// return [`{name|${name}}`, `{num|${v}件}{ratio|(${s}吨)}`].join(" ");
						return [`{name|${name}}`, `{num|${jishu}车}{ratio|(${s}吨)}`].join(" ");
					},
				},
				series: [
					{
						data: data.map((item) => {
							return {
								...item,
								value: item.jishu,
							};
						}),
						type: "pie",
						radius: ["35%", "60%"],
						center: ["25%", "50%"],
						clockwise: true,
						avoidLabelOverlap: true,
						label: {
							show: true,
							position: "inside",
							rich: {
								name: {
									fontSize: 14,
									color: "#fff",
									padding: [0, 0, 0, 0], //上，右，下，左
									width: 60,
								},
								ratio: {
									fontSize: 14,
									color: "#fff",
									padding: [0, 0, 0, 0],
								},
							},
							formatter(param) {
								return [`{name|${param.name}}\n{ratio|${param.percent}%}`];
							},
						},
					},
				],
			};
		});
	};

	watchEffect(() => {
		getData();
	});

	// onMounted(() => {
	// 	getData();
	// });
</script>

<style lang="less" scoped></style>
